<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
    <style>
      /* 块元素:独占一行 默认的宽是占满父级元素 高度有内容撑开 可以改宽高 */
      div {
        width: 200px;
        height: 200px;
        background-color: blue;
      }

      /* 行内元素：默认只占内容的大小 不可以修改宽高  */
      span {
        background-color: yellowgreen;
      }

      /* 行内块元素:不独占一行 可以修改宽和高 */
      img {
        width: 200px;
      }
    </style>
</head>
<body>
    <div></div>
    <br>
    <span>span标签</span>
    <img src="../images/悟空.jpg" alt="孙悟空">
</body>
</html>